<template>
	<view class="definite">
		<u-navbar :is-back="true" title="买卖宝明细" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<image @click="goruleM" style="width: 1rem; height: 1rem; padding: 1rem" src="../../../style/image/my/A27.png" alt="" />
			</view>
		</u-navbar>
		<view style="padding: 1rem; background: #ffffff; margin-bottom: 0.2rem">
			<view class="now">当前收益(元)</view>
			<view class="money">{{profitMoney}}</view>
			<view class="time">上次结算时间为{{settlementDate}}</view>
		</view>
		<view style="padding: 0.6rem; background: #ffffff">
			<span class="record">订单记录</span>
			<span class="image">
				<TimeTest :selectTime='selectTime' @func="getMsgFormSon"></TimeTest>
			</span>
		</view>

		<view v-if="showDatas.length > 0">
			<view style="padding: 0.3rem 0.5rem" v-for="(item, index) in showDatas" :key="index">
				<view class="buying">
					<view style="margin-bottom: 0.5rem">
						<span class="buying-one">充电宝{{item.type==0?'卖出':'买入'}}</span>
						<span class="sn" style="">(SN:{{item.bankSn==null?'暂无':item.bankSn}})</span>
					</view>
					<view class="buying-time">
						<span>{{item.type==0?'卖出':'买入'}}时间：</span>
						<span>{{item.createTime}}</span>
					</view>
					<view class="money-num">{{item.type==0?'+':'-'}}{{item.money}}</view>
				</view>
			</view>

			<u-loadmore v-show="loadmoreModal" :status="status" :load-text="loadText" />

		</view>

		<view v-if="showDatas.length == 0" style="padding: 3rem 5rem 0 5rem; text-align: center">
			<image style="width: 6rem; height: 6rem" src="../../../style/image/my/A28.png" alt="" />
			<view style="color: #999999; font-size: 0.65rem">当前暂无订单明细</view>
		</view>

		<u-modal v-model="show" confirm-text="知道了" title="规则" @cancel="cancel" @confirm="confirm">
			<view class="u-update-content">
				<rich-text style="padding: 0rem 1rem" :nodes="content"> </rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import uNavbar from '@/uview-ui/components/u-navbar/u-navbar.vue'

	import uModal from '../../../uview-ui/components/u-modal/u-modal.vue'

	import {
		bankBill,
		bankProfit
	} from "../../../utils/uniApi";


	import TimeTest from "../../../views/test/timeTest.vue";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			'u-navbar': uNavbar,
			'u-modal': uModal,
			TimeTest
		}
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public profitMoney = ''

		public settlementDate = ''

		public dateType = ''

		public dateTime = ''

		public pageData = 1

		public selectTime = ''


		public showDatas: any = []

		public show = false
		public content =
			`
					1. 充电宝归还到其他代理底座上，您收入60 元，次充电宝自动归属 为此代理。<br><br>
					2.其他代理设备归还到您的底座上，您扣除 60元，充电宝自动归属到您名下。<br><br>
					3.当代理余额不足60元，充电宝依然归您， 产生订单分润归您所有。<br><br>
          4.当前收益为未结算到可提现余额里的充电 宝收益，充电宝的收益每月15日与30日自 动到达您可提现余额中，您可通过收益明细 查看记录。<br><br>
          5.若当前收益为0时，产生充电宝购买订单时，需要从可提现金额里进行扣除。
				`

		//加载
		public status = "nomore";
		public loadText = {
			loadmore: "轻轻上拉",
			loading: "努力加载中",
			nomore: "暂无更多数据",
		};

		public loadmoreModal = true;

		public continueTypes = true;


		created() {}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			//  uni.navigateTo({
			// url: './selectBusin'
			// });
			uni.showLoading({
				title: '加载中'
			});

			this.bankProfitM()

			// this.bankBillM()
		}


		getMsgFormSon(data: any, timeType: string) {
			// alert('999')
			console.log('子组件的数据', data, timeType)
			this.dateType = timeType
			this.dateTime = data;
			this.bankBillM()
		}

		bankProfitM() {
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			}
			bankProfit(params).then((res: any) => {

				console.log(res, '宝买卖收益')
				this.profitMoney = res.data.data.profitMoney
				this.settlementDate = res.data.data.settlementDate

			})
		}

		onPullDownRefresh() {
			console.log("refresh");

			setTimeout(function() {
				uni.redirectTo({
					url: "./def",
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}

		goruleM() {
			this.show = true
		}

		bankBillM() {

			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				dateType: this.dateType, ////查询条件-查询时间类型（month:月  day:日）
				dateTime: this.dateTime, //查询条件-查询时间
				pageNo: this.pageData,
				pageSize: '10',
				// 返回参数：
				// money  		金额
				// createTime	时间
				// bankSn		设备号
				// type		类型（0 卖出，1 买入）
			}
			bankBill(params).then((res: any) => {
				//  console.log(res,'123213')
				console.log(res.data, '数据列表')

				// this.showDatas=res.data.data

				if (res.data.data == null) {
					uni.showToast({
						title: "请求数据失败",
						icon: "none",
						duration: 2000,
					});
				} else {
					var boolee = res.data.hasNext == false && this.continueTypes == false;

					if (res.data.hasNext == true) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}

					console.log(res.data.hasNext, this.continueTypes, boolee);

					if (res.data.isFirst || !boolee) {
						res.data.data.filter((item: any, index: number) => {

							this.showDatas.push(item);

							if (res.data.hasNext == false) {

								this.continueTypes = false;
							}
						});

						uni.hideLoading();
					} else {
						// alert("加载完毕");
					}
				}
				uni.hideLoading();


			})
		}

		onReachBottom() {
			console.log('xialiaxialia ')
			this.pageData = this.pageData + 1;
			this.bankBillM();
		}

		// BackM(){
		//   uni.navigateTo({
		//   url: '../../stati/index'
		//   });
		// }
	}
</script>

<style lang="scss" scoped>
	>>>.u-update-content>uni-rich-text:nth-child(1)>view:nth-child(1) {
		padding: 0rem 1rem;
	}

	/deep/.u-update-content {
		padding: 0rem 0.4rem;
	}


	.now {
		color: #000000;
		font-size: 0.8rem;
		text-align: center;
		font-weight: 300;
		font-family: PingFang SC;
		margin-bottom: 0.7rem;
	}

	.money {
		color: #02af74;
		font-size: 0.9rem;
		text-align: center;
		font-weight: bold;
		font-family: PingFang SC;
		margin-bottom: 0.7rem;
	}

	.time {
		font-size: 0.7rem;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.record {
		color: #000000;
		font-size: 0.8rem;
		font-weight: 300;
		font-family: PingFang SC;
	}

	.buying {
		padding: 0.5rem;
		background: #ffffff;
		border-radius: 0.2rem;
		position: relative;
	}

	.buying-one {
		font-size: 0.8rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.sn {
		color: #02af74;
		font-size: 0.7rem;
		font-family: PingFang SC;
		font-weight: 400;
	}

	.buying-time {
		color: #000000;
		font-size: 0.7rem;
		font-family: PingFang SC;
		font-weight: 300;
	}

	.money-num {
		position: absolute;
		top: 1.2rem;
		right: 1.5rem;
		color: #ff0000;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.image {
		float: right;
		display: flex;
		align-items: center;
	}

	.image image {
		width: 0.7rem;
		height: 0.7rem;
		padding-right: 0.4rem;
	}

	.definite {
		font-family: PingFang SC;
		background: #f3f5f7;
		height: 100%;
	}

	uni-page-body {
		height: 100%;
	}
</style>
